<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FLAC 音乐播放器</title>
  <link rel="stylesheet" href="popup.css">
</head>
<body>
  <div class="container">
    <div class="header">
      <div class="logo-container">
        <canvas id="logo-canvas" width="64" height="64"></canvas>
      </div>
      <h1>FLAC 音乐</h1>
      <p class="subtitle">简约 · 大气 · 无损</p>
    </div>

    <div id="unlock-section" class="section">
      <div class="form-group">
        <label for="unlock-code">解锁码</label>
        <input 
          type="text" 
          id="unlock-code" 
          placeholder="请输入解锁码（有效期12小时）"
          autocomplete="off"
        >
        <p class="hint">从微信公众号【黑话君】获取解锁码</p>
      </div>
      <button id="unlock-btn" class="btn btn-primary">确认解锁</button>
      <div id="unlock-status" class="status-message"></div>
    </div>

    <div id="player-section" class="section hidden">
      <div class="status-success">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M20 6L9 17l-5-5"></path>
        </svg>
        <span>已解锁</span>
      </div>
      <button id="open-player-btn" class="btn btn-primary btn-large">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <polygon points="5 3 19 12 5 21 5 3"></polygon>
        </svg>
        打开播放器
      </button>
      <div class="info-text">
        <p>解锁码剩余时间：<span id="time-remaining">--</span></p>
      </div>
    </div>
  </div>

  <script src="logo-generator.js"></script>
  <script src="popup.js"></script>
</body>
</html>

